<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>课程信息</title>
<style>
#addForm{
  position: absolute;
  top:50px;
}
 
</style>
<script src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
	let p=1;
	var total=1;
	var t=$("#stable");
	$("a#first").click(function(){
		p=1;
		load();
	});
	$("a#prev").click(function(){
		if(p<=1)
			return;
		p--;
		load();
	});
	$("a#next").click(function(){
		if(p>=total)
			return;
		p++;
		load();
	});
	$("a#last").click(function(){
		p=total;
		load();
	});
	function load(){
		t.find("tr:gt(0)").remove();
		$.get("subjectServlet",{p:p},function(data){
			total=data.pageTotal;//外部的total赋值
			$.each(data.datas,function(i,d){
				t.append("<tr><td>"+d.id+"</td><td>"+d.subjectname+"</td><td>"+d.classhour+"</td><td>"+d.gradeid+"</td></tr>");
			});
		});
	}
	load();
	//
	$("#addLink").click(function(){
		if($("#addForm").is(":visible"))
		{
			$("table#stable").css("opacity",1);
			$("#addForm").hide();
		}
		else
		{
			$("table#stable").css("opacity",0.1);
			$("#addForm").show();
		}
		
		return false;
	});
	
	$("#btnAdd").click(function(){
		var f=$("#addForm form").serialize();
		var f2=$("#addForm form").serializeArray();
		alert(f);
		alert("seriaarray:"+JSON.stringify(f2));
		$.post("addSubjectServlet",f,function(res){
			alert(res?"增加成功":"增加失败");
		},"json");
		return false;
	});
});
</script>
</head>
<body>
<p>
<a href="#" id="addLink">添加</a>
</p>
 <table id="stable" align="center" width="60%" border="1" cellspacing="0" cellpadding="0">
 	<caption>课程信息表</caption>
 	<tr>
 	<td>编号</td><td>课程名称</td><td>课时</td><td>所属年级</td>
 	</tr>
 </table>
 <p align="center">
 <a href="#" id="first">首页</a>
  <a href="#" id="prev">上一页</a>
  <a href="#" id="next">下一页</a>
  <a href="#" id="last">末页</a>
 </p>
 <div style="display:none" id="addForm">
 	<form method="post" action="addSubject">
 		<p>
 		<input type="text" name="subjectname" placeholder="课程名称" required="required"/>
 		<input type="number" min="0" name="classhour" placeholder="学时" required="required"/>
 		<input type="number" name="gradeid" placeholder="年级号" required="required"/>
 		<input type="submit" value="保存" id="btnAdd"/>
 		</p>
 	</form>
 </div>
</body>
</html>